<template>
  <div>
    <bread second="订单管理" third="订单列表"></bread>
    <el-card class="box-card" style="margin-top:15px">
      <div style="margin-top:15px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input
              placeholder="请输入内容"
              class="input-with-select"
              v-model="orderObj.query"
              clearable
              @clear="getOrderlist"
            >
              <el-button slot="append" icon="el-icon-search" @click="getOrderlist"></el-button>
            </el-input>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="8">
            <el-button type="primary">添加商品</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table :data="tableData" border style="width: 100%;margin-top:10px">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="order_number" label="订单编号"></el-table-column>
        <el-table-column prop="order_price" label="订单价格(元)" width="120px"></el-table-column>
        <el-table-column prop="pay_status" label="是否付款" width="100px">
          <template slot-scope="scoped">
            <el-tag v-if="scoped.row.pay_status === 1" type="success">已付款</el-tag>
            <el-tag v-else type="danger">未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="120px">
          <template slot-scope="scoped">
            <el-tag v-if="scoped.row.is_send === '是'" type="success">已发货</el-tag>
            <el-tag v-else type="danger">未发货</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="下单时间" width="200px">
          <template slot-scope="scoped">{{ scoped.row.create_time | format }}</template>
        </el-table-column>
        <el-table-column prop="telephone" label="操作" width="130px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
              <i class="el-icon-delete"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top:10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="orderObj.pagenum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="orderObj.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
/* eslint-disable */
import { getOrderlist_api } from '@/api/index.js'
export default {
  data() {
    return {
      tableData: [],
      orderObj: {
        query: '',
        pagenum: 1,
        pagesize: 10,
        user_id: '', // 用户 ID
        pay_status: '', // 支付状态
        is_send: '', // 是否发货
        order_fapiao_title: '', // ['个人','公司']
        order_fapiao_company: '', // 公司名称
        order_fapiao_content: '', // 发票内容
        consignee_addr: '' // 发货地址
      },
      total: null
    }
  },
  created() {
    this.getOrderlist()
  },
  methods: {
    async getOrderlist() {
      const { data: res } = await getOrderlist_api(this.orderObj)
      console.log(res, 11)
      if (res.meta.status === 200) {
        this.tableData = res.data.goods
        this.total = res.data.total
      }
    },
    handleDelete() { },
    // 分页
    handleSizeChange(val) {
      this.orderObj.pagesize = val
      this.getOrderlist()
      // console.log(`每页 ${val} 条`, val, '00000')
    },
    handleCurrentChange(val) {
      this.orderObj.pagenum = val
      this.getOrderlist()
      // console.log(`当前页: ${val}`, val)
    }
  }
}
</script>
<style lang="less" scoped></style>
